<template>
  <div class="module-layout">
    <je-panel v-bind="options">
      <template #top>
        <source-head :save-action="saveAction" @validateAction="validateAction" />
      </template>
      <template #default>
        <source-table-main :validate-save="validateSave" @saveTableAction="saveTableAction" />
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, inject, toRaw } from 'vue';
  import SourceHead from '@/views/data-source/common/source-head.vue';
  import SourceTableMain from '@/views/data-source/source-table/components/source-table-main.vue';
  import { Panel } from '@jecloud/ui';
  import { useSourceStore } from '@/store/source-store';
  import { SOURCE_DATA_LABEL } from '@/helper/constant';
  export default defineComponent({
    name: 'SourceTable',
    components: {
      JePanel: Panel,
      SourceHead,
      SourceTableMain,
    },
    setup() {
      const state = reactive({
        validateSave: false, //保存时验证状态
        saveAction: false, //开始保存的操作
      });
      const methods = {
        //保存验证必选项是否已输入
        validateAction() {
          state.validateSave = true;
          setTimeout(() => {
            state.validateSave = false;
          }, 300);
        },
        //保存资源表数据源
        saveTableAction(saveStatus) {
          state.saveAction = saveStatus;
        },
      };
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .module-layout {
    width: 100%;
    height: 100%;
  }
</style>
